<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		html {
			background-color: #6d60d6;
			/*background-image: linear-gradient(135deg, #5d5dff, #ff5656);*/
		}
		.container {
			width: 610px;
			margin: 10px auto;
			position: relative;
		}
		#cs {
			border: 1px solid #c3ff00;
		}
		.my-btn {
			padding: 5p2;
		}
		.select-list {
			display: flex;
			flex-wrap: wrap;
		    align-items: center;
		    border: 1px solid #c3ff00;
		    border-radius: 5px;
		    min-height: 50px;
		}
		.select-list>.item {
			width: 18%;
			box-sizing: border-box;
			border: 1px solid #c3ff00;
			text-align: center;
			padding: 5px 0;
			margin: 5px;
			font-size: 20px;
			color: red;
			font-weight: bold;
		}
		.show-name {
			width: 70px;
			height: 30px;
			line-height: 30px;
			border: 1px solid #c3ff00;
			/* animation-name: myShow; */
		    animation-duration: 1s;
		    animation-timing-function: linear;
			position: absolute;
			right: 150px;
    		top: 280px;
    		color: red;
    		font-size: 16px;
    		text-align: center;
    		font-weight: bold;
		}
		@keyframes myShow {
			0% {
				transform: rotateZ(0) scale(1);
				right: 150px;
    			top: 280px;
    			opacity: 1;
			}
			20% {
				transform: rotateZ(0) scale(2);
				right: 150px;
    			top: 280px;
    			opacity: 0.9;
			}

			50% {
				transform: rotateZ(1500deg) scale(2.4);
				right: 200px;
    			top: 540px;
    			opacity: 0.6;
			}
			60% {
				transform: rotateZ(1800deg) scale(2);
				right: 200px;
    			top: 540px;
    			opacity: 0.5;
			}

			100% {
				transform: rotateZ(3600deg) scale(1);
				right: 450px;
    			top: 680px;
    			opacity: 0.1;
			}
		}
	</style>
</head>
<body>
	
	<div class="container">
		<canvas id="cs" width="600px" height="600px"></canvas>
		<div class="show-name" style="display: none;"></div>
		<div>
			<button id="actBtn" type="button" class="my-btn">开始</button>
			<button id="actBtn2" type="button" class="my-btn">暂停</button>
			<button id="actBtn3" type="button" class="my-btn">加速</button>
			<button id="actBtn4" type="button" class="my-btn">选择</button>
		</div>
		<hr style="margin: 5px 0;">
		<h3>中奖人员:</h3>
		<div class="select-list">
			<!-- <div class="item">测试1</div>
			<div class="item">测试1</div>
			<div class="item">测试1</div>
			<div class="item">测试1</div>
			<div class="item">测试1</div>
			<div class="item">测试1</div>
			<div class="item">测试1</div> -->
		</div>
	</div>
	
	<script src="./names.js"></script>
	<script>
		onload = function () {
			// let data = [
			// 	"测试11","测试22","测试33","测试44","测试55",
			// 	"测试66","测试77","测试88","测试99",
			// 	"a测试11","a测试22","a测试33","a测试44","a测试55",
			// 	"a测试66","a测试77","a测试88","a测试99",
			// 	"b测试11","b测试22","b测试33","b测试44","b测试55",
			// 	"b测试66","b测试77","b测试88","b测试99"
			// ];
			let g = new MyGame(document.getElementById("cs"), data);
			g.drawMap();

			document.getElementById("actBtn").addEventListener('click', function(){
				g.start();
			});
			document.getElementById("actBtn2").addEventListener('click', function(){
				g.stop();
			});
			document.getElementById("actBtn3").addEventListener('click', function(){
				g.upSpeed();
			});

			document.getElementById("actBtn4").addEventListener('click', function(){
				g.doSelect((item)=>{
					let sl = document.querySelector(".select-list");
					let div = document.createElement("div");

					let show = document.querySelector(".show-name");
					show.innerText = item;
					show.style.display = "block";
					show.style['animation-name'] = "myShow";

					setTimeout(()=>{
						show.innerText = "";
						show.style.display = "none";
						show.style['animation-name'] = null;

						div.innerText = item;
						div.className = "item";
						sl.appendChild(div);
					}, 1000);
				});
			});

			window.g = g;
		}



		function MyGame(cs, data) {
			if(!this instanceof MyGame) {
				throw new Error("MyGame constructor need use \"new\" key word");
			}
			// let cs = document.getElementById("cs");
			this.ctx = cs.getContext("2d");
			this.data = JSON.parse(JSON.stringify(data));
			// 圆心
			this.x = 300;
			this.y = 300;
			// 半径
			this.r = 260;
			this.tipWitdh = 0;

			this.drawMap = function () {
				this.areaCount = this.data.length;
				// 单个区域的度数
				this.deg = 360/this.areaCount;
				this.tipWitdh = Math.floor((this.r*2*Math.PI)/this.areaCount);

				this.ctx.clearRect(0, 0, 600, 600);

				this.drawCore(0);

				//console.log('drawMap---');
			};

			this.drawCore = function (degree) {
				this.ctx.strokeStyle="#c3ff00";
				this.ctx.beginPath();
				this.ctx.arc(this.x, this.y, this.r, 0, 2*Math.PI);
				this.ctx.stroke();
				this.ctx.closePath();
				

				for(let i=0; i<this.areaCount; i++) {
					let p = this.getPoint(this.x, this.y, this.r, this.deg*i + degree);
					// console.log(this.deg*i, p);
					// 绘制分隔线
					this.ctx.strokeStyle="#c3ff00";
					this.ctx.beginPath();
					this.ctx.moveTo(this.x, this.y);
					this.ctx.lineTo(p.x, p.y);
					this.ctx.stroke();
					this.ctx.closePath();


					this.ctx.save();
					this.ctx.beginPath();
					this.ctx.strokeStyle="#cddc39";
					this.ctx.fillStyle="#cddc39";
					this.ctx.font="bold 14px 宋体";
					let deg2 = this.deg*i + this.deg/2 + degree;
					let p2 = this.getPoint(this.x, this.y, this.r*0.75, deg2);

					this.ctx.translate(p2.x, p2.y);
					this.ctx.rotate( (this.deg*i + this.deg/2 + degree) * Math.PI / 180);
					this.ctx.translate(-p2.x, -p2.y);
					// 绘制文字
					this.ctx.textBaseline = "middle";// middle
				    this.ctx.textAlign = "center";
					this.ctx.fillText(this.data[i], p2.x, p2.y);

					this.ctx.closePath();
					this.ctx.restore();
				}
				

				this.drawPointer();
			}

			this.getPoint = function (x, y, r, angle) {
				let x1 = x + r * Math.cos(angle * Math.PI / 180);
				let y1 = y + r * Math.sin(angle * Math.PI / 180);
				return {x: x1, y: y1};
			};

			this.drawPointer = function () {
				let {x, y, r} = this;
				this.ctx.beginPath();
				this.ctx.fillStyle="#FF0000";
				this.ctx.strokeStyle="#FF0000";

				// this.ctx.moveTo(x, y);
				// this.ctx.lineTo(x, y - r);

				/* 上箭头 */
				// this.ctx.moveTo(x, y - r);
				// this.ctx.lineTo(x+5, y - r + 20);
				// this.ctx.lineTo(x+2, y - r + 20);
				// this.ctx.lineTo(x, y);
				// this.ctx.lineTo(x-2, y - r + 20);
				// this.ctx.lineTo(x-5, y - r + 20);
				// this.ctx.lineTo(x, y - r);

				/*右箭头*/
				this.ctx.moveTo(x, y);
				this.ctx.lineTo(x + r - 20, y - 2);
				this.ctx.lineTo(x + r - 20, y - 5);
				this.ctx.lineTo(x + r, y);
				this.ctx.lineTo(x + r - 20, y + 5);
				this.ctx.lineTo(x + r - 20, y + 2);
				this.ctx.lineTo(x, y);

				this.ctx.stroke();
				this.ctx.fill();

				this.ctx.closePath();
			};

			this.currentDeg = 0;
			this.running = false;
			this.speed = 2;
			this.start = function () {
				if(this.running) return;
				if(this.data.length == 0){
					this.drawMap();
					return;
				}
				console.log('start--');
				this.selected = false;
				this.running = true;
				this.speed = 2;
				this.drawMap();
				this.run();
			}
			this.run = function () {
				this.ctx.clearRect(0, 0, 600, 600);
				this.drawCore(this.currentDeg);

				this.currentDeg += this.speed;

				if(this.currentDeg > 360 ) {
					this.currentDeg = this.currentDeg - 360;
				}

				if(this.running && this.speed > 0){
					requestAnimationFrame(()=>{
						this.run();
					});
				}
			};
			this.upSpeed = function () {
				// 加速
				this.speed += 1;
			}
			this.stop = function () {
				this.running = false;
			}
			this.selected = false;
			this.doSelect = function (callback) {
				if(this.selected) return;
				console.log('doSelect');
				this.runSelect(callback);
			};
			this.runSelect = function(callback) {
				this.speed -= 0.5;
				if(this.speed > 0){
					setTimeout(()=>{
						this.runSelect(callback);
						this.selected = true;
					}, 200);
				} else {
					this.running = false;

					// 找到被选中的值
					let index = this.areaCount - Math.ceil(this.currentDeg/this.deg);
					let obj = this.data[index];
					console.log(index, "selected:", obj);
					if(obj === undefined) {
						return;
					}
					// 存入选中的列表
					callback(obj);
					setTimeout(()=>{
						// 移除
						this.data.splice(index, 1);
						// 重绘
						// this.drawMap();
					}, 1000);
				}
			}
		}


	</script>
</body>
</html>